<template>
	<view>
		<!-- 顶部搜索模块开始 -->
		<view class="search">
			<u-search margin="0rpx 25rpx 0rpx 25rpx" height="54" searchIconSize="42" :showAction="true"
				placeholder="请输入商家或商品名称" :actionStyle="{
		            color: '#ff0000',
					fontWeight: 'bold'
		        }" borderColor="red" bgColor="white" v-model="keyword" @custom="clickToSearch"
				@search="keyboardReturn"></u-search>
		</view>
		<!-- 搜索模块结束 -->
		<!-- 历史搜索开始 -->
		<view>
			<view class="history_search">
				<text class="text_history">历史搜索</text>
				<image v-if="historyList.length != 0" class="search-keyword-operate-icon"
					src="https://img1.baidu.com/it/u=3054860789,2700180280&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=537"
					@click="clearHistory"></image>
			</view>
			<!-- 历史搜索文本标签开始 -->
			<view class="search-keywords">
				<text class="search-keyword" v-for="(item,index) in historyList" :key="index"
					@click="fillKeyword(item.searchName)">{{item.searchName}}</text>
			</view>
			<!-- 历史搜索文本标签结束 -->
		</view>
		<!-- 历史搜索结束 -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				historyList: [], // 搜索历史数据
				keyword: '' // 搜索实时文本框值
			};
		},
		onLoad: function() {
			this.historyList = uni.getStorageSync("searchHistoryList") || []
			const _this = this
			uni.$on('refresHistoryData', function() { //接收广播   刷新搜索历史
				_this.historyList = uni.getStorageSync("searchHistoryList") || [] //读取缓存中得搜索历史
				_this.historyList.sort(function(r1, r2) {
					return new Date(r2.date) - new Date(r1.date)
				})
				// 默认搜索历史只保留8占位,多了清楚最后一位
				if (_this.historyList.length > 8) {
					_this.historyList.pop(); // 如果数组长度超过最大长度，删除最后一个元素
				}
				_this.historyList = _this.historyList
				uni.setStorageSync("searchHistoryList", _this.historyList)
			});
		},
		methods: {
			/**
			 * 点击右侧搜索按钮触发事件
			 * @param {Object} value  输入框返回值
			 */
			clickToSearch: function(value) {
				this.searchForHistoricalDataUpdates(value)
				// DOTO:请求搜索
			},
			/**
			 * 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发
			 * @param {Object} value  输入框返回值
			 */
			keyboardReturn: function(value) {
				this.searchForHistoricalDataUpdates(value)
				// DOTO:请求搜索
			},
			/**
			 * 点击垃圾桶清楚按钮触发事件
			 */
			clearHistory: function() {
				const _this = this
				uni.showModal({
					title: "确定要清空搜索历史吗?",
					success(res) {
						if (res.confirm) {
							_this.historyList = []
							uni.setStorageSync("searchHistoryList", [])
							uni.showToast({
								title: "清空成功"
							})
						}
					}
				})
			},
			/**
			 * 点击历史标签时的触发事件
			 * @param {Object} tagTextValue 点击历史标签返回的标签值
			 */
			fillKeyword: function(tagTextValue) {
				this.keyword = tagTextValue
				// DOTO:请求搜索
			},
			/**
			 * 用于监听输入框记录，实时更新搜索历史的数值(多处共用)
			 * @param {Object} value 搜索输入文本框的值
			 */
			searchForHistoricalDataUpdates: function(value) {
				//如果输入框内容为空，则不留存搜索记录
				if (value == "" || value == null) {
					this.$u.toast('请先输入要搜索的关键字')
					return
				}
				// 处理搜索后记录实时返回搜索历史更新
				const date = Math.round(new Date() / 1000) //当前得时间戳
				let data = {
					searchName: value,
					date: date
				}
				this.historyList.push(data)
				uni.setStorageSync("searchHistoryList", this.historyList)
				uni.$emit("refresHistoryData") //发送通知 让搜索历史重新排序
				this.keyword = ''
			}
		}
	}
</script>

<style lang="scss">
	.history_search {
		margin: 30rpx 25rpx 0 25rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 600;
		font-size: 23rpx;

		.text_history {
			font-weight: bold;
			color: black;
			font-size: 25rpx;
		}

		.search-keyword-operate-icon {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.search-keywords {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;

		.search-keyword {
			line-height: 45rpx;
			background-color: #e8e8e8;
			padding: 0rpx 30rpx;
			border-radius: 30rpx;
			margin: 10rpx 25rpx 15rpx 25rpx;
			color: #616161;
			font-size: 23rpx;
		}
	}
</style>